<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Data binding -- Ref kitchen sink example</title>

		<script src="../../../../dojo/dojo.js"
				type="text/javascript"
				djConfig="parseOnLoad: true, isDebug: true">
		</script>
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
		<script type="text/javascript" >
		  dojo.require("dojox.mvc");
		  dojo.require("dojox.mvc.Group");
		  dojo.require("dijit.form.TextBox");
		  dojo.require("dijit.form.Button");
		  dojo.require("dojo.parser");

		  // Initial data
		  var order = {
			  "Serial" : "360324",
			  "First"  : "John",
			  "Last"   : "Doe",
			  "Email"  : "jdoe@example.com",
			  "ShipTo" : {
				  "Street" : "123 Valley Rd",
				  "City"   : "Katonah",
				  "State"  : "NY",
				  "Zip"	   : "10536"
			  },
			  "BillTo" : {
				  "Street" : "17 Skyline Dr",
				  "City"   : "Hawthorne",
				  "State"  : "NY",
				  "Zip"	   : "10532"
			  }
		  };

		  // This example is an odd mix of everything, being the kitchen sink example :-)

		  // The dojox.mvc.StatefulModel class creates a data model instance, which will be
		  // shared by widgets being instantiated programmatically as well as
		  // declaratively
		  var model = dojox.mvc.newStatefulModel({ data : order });

		  // Here is programmatic data bound widget instantiation
		  function addBoundDijits(){
			  // Absolute ref, passed as object
			  var serial = new dijit.form.TextBox({id: "serialInput", ref: model.Serial});
			  serial.placeAt(dojo.byId("serialDiv"));
			  serial.startup();

			  // Relative refs, passed as strings
			  var fn = new dijit.form.TextBox({id: "firstnameInput", ref: "First"});
			  fn.placeAt(dojo.byId("firstnameDiv"));
			  fn.startup();
			  var ln = new dijit.form.TextBox({id: "lastnameInput", ref: "Last"});
			  ln.placeAt(dojo.byId("lastnameDiv"));
			  ln.startup();
		  }

		  dojo.addOnLoad(addBoundDijits);
		</script>
	</head>
	<body class="claro">
		<div id="wrapper">
		<div id="header">
		  <div id="navigation">
		  </div>
		  <div id="headerInsert">
			<h1>Data Binding</h1>
			<h2>Ref kitchen sink example - all ways to specify refs, mixed bag on purpose.</h2>
		  </div>
		</div>
		<div id="main">
		  <div id="leftNav">
		  </div>
		  <div id="mainContent">
		<!--
			Following group shows first example of declarative usage. Its child
			dijits are added programmatically.
			Here, the ref points to the application space "model" variable (can
			be any dot-separated expression).
		-->
		<div class="row" id="infoGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model'">
			<!-- The serial text box gets placed in div below programmatically -->
			<div class="row" id="serialDiv">
				<label class="cell" for="serialInput">Order #:</label>
			</div>
			<!-- The first and last name text boxes gets placed in corresponding
				 divs below, with a relative ref to data-bound parent (group) -->
			<div class="row" id="firstnameDiv">
				<label class="cell" for="firstnameInput">First:</label>
			</div>
			<div class="row" id="lastnameDiv">
				<label class="cell" for="lastnameInput">Last:</label>
			</div>
			<!-- Here, we break out of any parent data binding association
				 by declaratively specifying a direct ref expression.
				 There is no necessity for DOM to match data structure even in
				 declarative ref specifications. -->
			<div class="row" id="emailDiv">
				<label class="cell" for="emailInput">Email:</label>
				<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: 'expr:model.Email'"></input>
			</div>
		</div>
		<br/>
		Choose:
		<button id="shipto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', model.ShipTo);}">Ship To</button>
		<button id="billto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', model.BillTo);}">Bill To</button>
		<br/>
		<!--
			Following group shows a declarative example of a ref thats relative
			to another widget's ref. This is useful, for example, if the widget
			may move its DOM location at some point.
			Here, we're saying group's ref is relative to "infoGroup" widget's
			ref and is located at the property "ShipTo" therein.
		-->
		<div class="row" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'widget:infoGroup.ShipTo'">
			<!-- This is a relative ref, passed as a string -->
			<div class="row">
				<label class="cell" for="streetInput">Street:</label>
				<input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: 'Street'"></input>
			</div>
			<!-- Here, we are explicit that the string is a relative ref, which
				is slightly more performant. -->
			<div class="row">
				<label class="cell" for="cityInput">City:</label>
				<input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: 'rel:City'"></input>
			</div>
			<!-- Just goofing with whitespace in refs below, for robustness -->
			<div class="row">
				<label class="cell" for="stateInput">State:</label>
				<input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: '	 rel:	State'	"></input>
			</div>
			<div class="row">
				<label class="cell" for="zipInput">Zipcode:</label>
				<input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: 'Zip' "></input>
			</div>
		</div>
		<br/>
		Model:
		<button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model.reset();}">Reset</button>
		</div></div></div>
		<script type="text/javascript">
			function setRef(id, addrRef) {
				var widget = dijit.byId(id);
				widget.set("ref", addrRef);
			}
		</script>
	</body>
</html>
